@extends("admin.public.layout")

@section("content")


        <div class="container-xxl flex-grow-1 container-p-y">


            <div class="row">
                @foreach($musicTypeMenuModels as $v)
                    <form method="post" id="form_{{$v->music_type_menu_code}}" action="" enctype="multipart/form-data">
                        @csrf
                        <input type="file" class="file" name="file" data-code="{{$v->music_type_menu_code}}" style="display: none" id="file_{{$v->music_type_menu_code}}">
                    </form>
                @endforeach

                <!-- Form controls -->
                <form action="{{ route('adminMusicParagraphConfigSave') }}" method="post">

                    <div class="col-md-6">
                        <div class="card mb-4">
                            <h5 class="card-header">{{$pageName}}</h5>
                            <div class="card-body">


                                @csrf
                                <input required type="hidden" name="id" value="{{$musicParagraphModel->id}}">

                                @foreach($musicTypeMenuModels as $v)
                                    <div class="mb-3">
                                        <label for="{{$v->music_type_menu_code}}"
                                               class="form-label">{{$v->music_type_menu_name}}</label>
                                        <input required type="text" class="form-control" id="{{$v->music_type_menu_code}}"
                                               name="{{$v->music_type_menu_code}}"
                                               value="{{isset($musicParagraphConfigModels[$v->music_type_menu_code]) ? $musicParagraphConfigModels[$v->music_type_menu_code]: ''}}">

                                        <div class="row" style="margin: 5px 0px 10px 0px">
                                            <div class="col-md-3">
                                                <button class="btn btn-primary upload-btn" data-code="{{$v->music_type_menu_code}}" >上传文件</button>
                                            </div>
                                            <div class="col-md-5">
                                                <span id="process_{{$v->music_type_menu_code}}">文件上传进度: 0%</span>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                                <div class="mb-3">
                                    <input required type="submit" class="form-control" value="修改">
                                </div>


                            </div>
                        </div>
                    </div>

                </form>

            </div>
        </div>

@endsection

@section("script")
    <script>
        $(function () {
            $(".upload-btn").click(function () {

                let fileId = "#file_" + $(this).attr("data-code")
                console.log(fileId)
                $(fileId).click()
                return false;
            })

            $(".file").change(function () {
                // console.log($(this).attr("data-code"))
                let dataCode = $(this).attr("data-code")
                let fromId = "#form_" +dataCode
                console.log(fromId)
                let formData = new FormData($(fromId)[0]);
                let xhr = new XMLHttpRequest();

                let processId = "#process_" + dataCode
                $(processId).text( "文件上传进度:" + "0%")

                xhr.upload.onprogress = function(event) {
                    if (event.lengthComputable) {
                        let percentComplete =  Math.trunc((event.loaded / event.total) * 10000)/100;

                        // 在这里更新UI，比如更新进度条
                        $(processId).text( "文件上传进度:" + percentComplete + "%")
                    }
                };

                xhr.onload = function() {
                    if (this.status === 200) {
                        console.log('上传成功:', JSON.parse(this.responseText).file_path);
                        let fileId = "#" + dataCode
                        $(fileId).val(JSON.parse(this.responseText).file_path)
                    } else {
                        console.error('上传失败:', this.status);
                    }
                };

                xhr.open('POST', "{{route('adminUpload')}}", true);
                xhr.send(formData);
            })

        })
    </script>
@endsection
